import React, { Component } from 'react'
import DataHoc from "containers/pay/template/data-hoc"
import AdvancedTable from "components/advanced-table"
import { Alert, Radio, Spin, Button } from "antd"
import { messages } from "share/common";
import PayingFooter from "./paying-footer";
import PayingModal from "./paying-modal";

class Paying extends Component {

  key = 'Paying';

  state = {
    loading: false,
    tableTitle: [],
    setOfBookId: '',
    radioValue: '',
    radioOption: [],
    warningKeys: [],
    visible: false,
    record: {},
    operateKey: '',
    searchForm: this.props.getSearchForm(this.key),
    sortDTOs: [],
    rowSelection: this.props.getSelection()(),
    selectedData: [],
    columns: this.props.getColumns(this.key)
  };

  service = (page, pageSize, searchParams) => {
    let { radioValue, setOfBookId, sortDTOs } = this.state, { initConfig } = this.props;
    let params = {
      page, size: pageSize, paymentMethodCategory: radioValue, ...searchParams,
      sortProperty: (sortDTOs[0] || {}).property,
      sortDirection: (sortDTOs[0] || {}).direction
    };
    return initConfig(this.key, params, searchParams.setOfBookId !== setOfBookId ? searchParams.setOfBookId : '')
  };

  onChangePage = data => {
    let warningKeys = [];
    data.map(item => {
      if ((new Date().getTime() - new Date(item.createdDate).getTime())/1000/60/60 > 12) {
        warningKeys.push(item.id);
      }
    });
    this.setState({ warningKeys });
  };

  handleCancel = value => {
    this.setState({ visible: false }, () => {
      if (value) {
        this.onSearch();
        this.advancedTableRef.getList();
      }
    })
  };

  handleOperate = (record = null, operateKey) => {
    const { selectedData } = this.state;
    this.setState({ record: record ? [record] : selectedData, operateKey }, this.setState({ visible: true }));
  };

  onRadioChange = e => {
    this.setState({ radioValue: e.target.value, columns: this.advancedTableRef.state.columns }, () => {
      this.advancedTableRef.setState({
        pagination: Object.assign(this.advancedTableRef.state.pagination, { current: 1 })
      }, () => {
        this.onSearch();
        this.advancedTableRef.getList();
      });
    });
  };

  onSearch = () => {
    this.props.onClearSelected();
  };

  componentDidMount() {
    const { getColumns } = this.props;
    this.setState({ columns: getColumns(this.key) });
  }

  render() {
    const { loading, visible, tableTitle, warningKeys, radioValue, radioOption, operateKey, record, searchForm,
      rowSelection, selectedData, columns } = this.state;
    const { handleTableTitle, handleTableChange } = this.props;
    return (
      <div style={{ height: '100%' }}>
        <Spin spinning={loading}>
          <AdvancedTable
            title={messages('finance-4.key119')/*支付中*/}
            tableName='pay-Paying'
            service={this.service}
            onGetData={this.onChangePage}
            rowClassName={record => warningKeys.includes(record.id) ? 'row-warning' : ''}
            tableTitle={() => handleTableTitle(tableTitle, selectedData, true)}
            onRef={ref => this.advancedTableRef = ref}
            searchForm={searchForm}
            onChange={handleTableChange}
            rowKey="id"
            rowSelection={radioValue === 'EBANK_PAYMENT' ? rowSelection : null}
            pagination={{
              pageSizeOptions: ['20', '50', '100', '150', '200', '500']
            }}
            columns={columns}
            onSearch={this.onSearch}
            footer={radioValue === 'EBANK_PAYMENT' ? [
              <PayingFooter onCancel={() => this.advancedTableRef.getList()}/>,
              <Button
                onClick={() => this.handleOperate(null, 'success')}
                disabled={selectedData.length === 0}
                style={{margin: '0 10px'}}
              >
                {messages('finance-4.key120')/*确认成功*/}
              </Button>,
              <Button
                onClick={() => this.handleOperate(null, 'error')}
                disabled={selectedData.length === 0}
              >
                {messages('finance-4.key121')/*确认失败*/}
              </Button>
            ] : null}
          >
            <Radio.Group value={radioValue} style={{ marginBottom: '12px' }}
                         onChange={this.onRadioChange}>
              {
                radioOption.map(item => <Radio.Button value={item.itemCode}>{item.showName}</Radio.Button>)
              }
            </Radio.Group>
            <div>
              <Alert
                message={<div>
                  {`${warningKeys.length > 0
                    ? messages('finance-4.key122')/*请注意，存在红色底色的付款已超过12小时未更新状态*/ + '；'
                    : ''}${messages('finance-4.key123')/*支付结果与银行业务处理速度有关，请耐心等待*/}`}
                </div>}
                type="info"
                showIcon
                style={{ width: '100%' }}
              />
            </div>
          </AdvancedTable>
          <PayingModal
            visible={visible}
            operateKey={operateKey}
            onCancel={this.handleCancel}
            record={record}
          />
        </Spin>
      </div>
    )
  }
}

export default DataHoc(Paying);
